import React, { memo } from 'react';
import 'antd/dist/antd.css';
import BlogList from '../components/BlogList/index';
import Banner from '../components/HomeBanner/index';
import { Row, Col } from 'antd';
import http from '../api/index';
import Menu from '../components/Menu/index';
import MySearch from '../components/MySearch/index';
import MobileMenu from '../components/MobileMenu/index';
import Footer from '../components/Footer/index';
import MyBackTop from '../components/MyBackTop/index';
class Home extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            e_width: 0,
            bannerHeight: '',
            blpgDataList: {
                keyword: '',
                current: 1,
                pageSize: 5,
                data: []
            }
        }
        this.getBlogListData = this.getBlogListData.bind(this);
    }
    handleClientW = (width) => {
        if (width < 500) {
            this.setState({
                bannerHeight: '300px'
            })
        } else if (width < 650) {
            this.setState({
                bannerHeight: '400px'
            })
        } else if (width < 800) {
            this.setState({
                bannerHeight: '550px'
            })
        } else if (width < 1000) {
            this.setState({
                bannerHeight: '700px'
            })
        } else {
            this.setState({
                bannerHeight: '850px'
            })
        }
    }
    componentDidMount() {
        window.addEventListener('resize', this.handleResize.bind(this)) //监听窗口大小改变
        let clientW = document.documentElement.clientWidth;
        this.changeStateWidth(clientW);
        this.handleClientW(clientW);
        // 默认查询加载
        this.getBlogListData()
    }
    changeStateWidth = (e_width) => {
        this.setState((state) => ({
            e_width: e_width
        }))
    }

    handleResize = e => {
        let e_width = e.target.innerWidth;
        this.changeStateWidth(e_width);
        this.handleClientW(e_width);
    }
    componentWillUnmount() {
        window.removeEventListener('resize', this.handleResize.bind(this));
    }

    // 搜索改变state
    onSearch(val) {
        this.getBlogListData('', val)
    }
    // 获取数据
    getBlogListData(type = '', keyword = '', current = 1, pageSize = 5) {
        let data = {
            type: type,
            keyword: keyword,
            current: current,
            pageSize: pageSize
        }
        if (this.state.blpgDataList.data) {
            //判断是否手机，查询之后滚动到顶部
            if (this.state.e_width > 800) {
                window.scrollTo({
                    top: 800,
                    behavior: "smooth"
                });
            } else {
                window.scrollTo({
                    top: 0,
                    behavior: "smooth"
                });
            }
        }
        //判断是否手机，查询之后滚动到顶部
        if (this.state.e_width > 800) {
            window.scrollTo({
                top: 800,
                behavior: "smooth"
            });
        } else {
            window.scrollTo({
                top: 0,
                behavior: "smooth"
            });
        }

        http.blog.blogList(data).then((res) => {
            this.setState((state) => ({
                blpgDataList: res
            }))
        })
    }
    render() {
        return (
            <>
                <MyBackTop />

                {/* mobileMenu */}
                <MobileMenu e_width={this.state.e_width} onSelect={this.getBlogListData} />
                {/* banner */}
                <div style={{ height: this.state.bannerHeight, width: '100%' }}>
                    <Banner />
                </div>
                {/* content */}
                <div className="maincontain">
                    {/* search */}
                    <Row>
                        <Col xs={2} sm={4} md={6} lg={8} xl={5}></Col>
                        <Col xs={20} sm={16} md={12} lg={8} xl={14}>
                            <div id={'Search'} style={{ margin: '30px' }}>
                                <MySearch
                                    onSearch={val => this.onSearch(val)}
                                />
                            </div>
                        </Col>
                        <Col xs={2} sm={4} md={6} lg={8} xl={5}></Col>
                    </Row>

                    {/* menu and list */}
                    <Row style={{ zIndex: '100', backgroundColor: '#fff' }}>
                        <Col xs={0} sm={0} md={this.state.e_width >= 800 ? 6 : 0} lg={6} xl={6}>
                            <div style={{ padding: '30px 20px' }}>
                                <Menu onSelect={this.getBlogListData} />
                            </div>

                        </Col>
                        <Col xs={24} sm={24} md={this.state.e_width >= 800 ? 18 : 24} lg={18} xl={18}>
                            <BlogList blpgDataList={this.state.blpgDataList} onShowSizeChange={this.getBlogListData} />
                        </Col>
                    </Row>
                </div>
                {/* Footer */}
                <Footer />
            </>
        );
    }
}

export default memo(Home);
